<template>
  <div class="preview-wrapper">
    <!-- 右边截图功能 -->
    <div class="right" :class="[currentPreviewCls]">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="choose">
          <div
            class="mobile"
            :class="previewMode === 'mobile' ? 'clicked' : ''"
            @click="choosePreviewMode('mobile')"
          >
            {{ $t('portalAuth.mobile') }}
            <div v-show="previewMode === 'mobile'" class="dot"></div>
          </div>
          <div
            class="desktop"
            :class="previewMode === 'desktop' ? 'clicked' : ''"
            @click="choosePreviewMode('desktop')"
          >
            {{ $t('portalAuth.desktop') }}
            <div v-show="previewMode === 'desktop'" class="dot"></div>
          </div>
        </div>
        <a-popconfirm
          :title="$t('portalAuth.sureToReset')"
          style="cursor: pointer"
          @confirm="() => onResetStyle()"
        >
          <div class="options">{{ $t('portalAuth.resetStyle') }}</div>
        </a-popconfirm>
      </div>

      <!-- 手机示意 -->
      <div v-if="previewMode === 'mobile'" class="is-mobile">
        <div
          id="test"
          class="phone-preview"
          :style="portalStyle.bgStyle"
          ref="phonePreviewRef"
        >
          <div class="preview-wrapper" :style="portalStyle.wrapperStyle">
            <div class="preview-logo-wrapper">
              <img
                v-if="form.hasLogo"
                class="preview-logo"
                :style="portalStyle.logoStyle"
                :src="portalLogo"
              />
            </div>
            <div class="preview-welcome-wrapper">
              <p
                v-if="form.portalSubForm.welcomeType === 'text'"
                class="preview-welcome-txt"
                :style="portalStyle.welcomeStyle"
              >
                {{ form.portalSubForm.welcome }}
              </p>

              <img
                v-else
                class="preview-welcome-img"
                :style="{ top: form.position + 'px' }"
                :src="welcomeImage"
              />
            </div>

            <div class="preview-market-wrapper">
              <p
                class="preview-market-txt"
                v-text="form.portalSubForm.marketMessage"
                :style="{ color: form.style.text.color }"
              ></p>
            </div>

            <div class="register-zone register-ipt-zone">
              <div id="register_login_form">
                <div id="" class="portal-ipt-form">
                  <div class="voucher-login-title js-title--register">
                    <i class="portal-icon icon-account"></i>
                    <span
                      class="portal-demo-txt demo-txt--register-title portal-title"
                    >
                      {{ form.portalSubForm.registerInputTitle }}
                    </span>
                  </div>
                  <div
                    class="register-ipt portal-demo-txt demo-txt--register-email"
                    id=""
                  >
                    {{ form.portalSubForm.registerEmailPlacehold }}
                  </div>
                  <div
                    class="register-ipt portal-demo-txt demo-txt--register-phone"
                    id=""
                  >
                    {{ form.portalSubForm.registerPhonePlacehold }}
                  </div>
                  <div
                    class="register-ipt portal-demo-txt demo-txt--register-username"
                    id=""
                  >
                    {{ form.portalSubForm.registerUserPlacehold }}
                  </div>
                </div>
              </div>
              <div class="buttonPosition" id="e_register">
                <div id="">
                  <div class="portal-login-btn" :style="portalStyle.btnStyle">
                    <span
                      id=""
                      class="portal-demo-txt demo-txt--register-login"
                    >
                      {{ form.portalSubForm.registerLoginBtnTxt }}
                    </span>
                  </div>
                </div>
                <div class="has-other-auth">
                  <div class="has-other-auth__line"></div>
                  <div class="has-other-auth__txt portal-demo-txt demo-txt--or">
                    {{ form.portalSubForm.or }}
                  </div>
                  <div class="has-other-auth__line"></div>
                </div>
              </div>
              <div class="row preview-tc" v-show="form.portalSubForm.tc">
                <div class="col-xs-1 noPadding checkTeco tecoZone">
                  <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                </div>
                <div class="col-xs-11 preview-tc__txt">
                  <p class="e_teco1 js-teco-1">
                    {{ form.portalSubForm.tcSubTxt1 }}
                  </p>
                  <span class="e_teco2 js-teco-2">
                    {{ form.portalSubForm.tcSubTxt2 }}
                  </span>
                </div>
              </div>
              <div class="row preview-tc">
                <div class="col-xs-1 noPadding checkTeco tecoZone">
                  <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                </div>
                <div class="col-xs-11 preview-tc__txt">
                  <span class="e_teco2 js-teco-2 register-teco">
                    {{ form.portalSubForm.regDisclaimerTitle }}
                  </span>
                </div>
              </div>
            </div>

            <div class="one-click-zone one-click-ipt-zone">
              <div class="preview-btn" :style="portalStyle.btnStyle">
                {{ form.portalSubForm.oneclickBtnTxt }}
              </div>
              <div class="preview-tc" v-show="form.portalSubForm.tc">
                <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                <div class="col-xs-11 preview-tc__txt">
                  <span :style="{ color: form.style.text.color }">
                    {{ form.portalSubForm.tcSubTxt1 }}
                  </span>
                  <span class="preview-link" :style="portalStyle.linkStyle">
                    {{ form.portalSubForm.tcSubTxt2 }}
                  </span>
                </div>
              </div>
            </div>

            <div class="voucher-zone voucher-ipt-zone">
              <div id="voucher_codeText" class="voucher-zone portal-ipt-form">
                <div class="voucher-login-title js-title--voucher">
                  <i class="portal-icon icon-voucher"></i>
                  <span
                    class="portal-demo-txt demo-txt--voucher-title portal-title"
                  >
                    {{ form.portalSubForm.voucherInputTitle }}
                  </span>
                </div>
                <div
                  class="voucher-ipt portal-demo-txt demo-txt--voucher-code"
                  id=""
                >
                  {{ form.portalSubForm.accesscodePlacehold }}
                </div>
              </div>

              <div class="portal-voucher-login">
                <div class="portal-login-btn" :style="portalStyle.btnStyle">
                  <span
                    id="e_voucher_span"
                    class="portal-demo-txt demo-txt--voucher-login"
                  >
                    {{ form.portalSubForm.voucherLoginBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="row preview-tc" v-show="form.portalSubForm.tc">
                <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                <div class="col-xs-11 preview-tc__txt">
                  <span :style="{ color: form.style.text.color }">
                    {{ form.portalSubForm.tcSubTxt1 }}
                  </span>
                  <span class="preview-link" :style="portalStyle.linkStyle">
                    {{ form.portalSubForm.tcSubTxt2 }}
                  </span>
                </div>
              </div>
              <div class="has-other-auth has-other-auth--voucher">
                <div class="has-other-auth__line"></div>
                <div class="has-other-auth__txt portal-demo-txt demo-txt--or">
                  {{ form.portalSubForm.or }}
                </div>
                <div class="has-other-auth__line"></div>
              </div>
            </div>

            <div class="account-zone account-ipt-zone">
              <div id="account_login_form">
                <div id="" class="portal-ipt-form">
                  <div class="voucher-login-title js-title--account">
                    <i class="portal-icon icon-account"></i>
                    <span
                      class="portal-demo-txt demo-txt--account-title portal-title"
                    >
                      {{ form.portalSubForm.accountInputTitle }}
                    </span>
                  </div>
                  <div
                    class="account-ipt portal-demo-txt demo-txt--account-username"
                    id=""
                  >
                    {{ form.portalSubForm.accountPlacehold }}
                  </div>
                  <div class="account-ipt" id="">
                    <span class="portal-demo-txt demo-txt--account-password">
                      {{ form.portalSubForm.passwordPlacehold }}
                    </span>
                    <i class="portal-icon icon-eye"></i>
                  </div>
                </div>

                <div class="buttonPosition" id="e_voucher">
                  <div id="">
                    <div class="portal-login-btn" :style="portalStyle.btnStyle">
                      <span
                        id=""
                        class="portal-demo-txt demo-txt--account-login"
                      >
                        {{ form.portalSubForm.accountLoginBtnTxt }}
                      </span>
                    </div>
                  </div>
                  <div class="has-other-auth">
                    <div class="has-other-auth__line"></div>
                    <div
                      class="has-other-auth__txt portal-demo-txt demo-txt--or"
                    >
                      {{ form.portalSubForm.or }}
                    </div>
                    <div class="has-other-auth__line"></div>
                  </div>
                </div>
                <div class="row preview-tc" v-show="form.portalSubForm.tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone">
                    <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                  </div>
                  <div class="col-xs-11 preview-tc__txt">
                    <span :style="{ color: form.style.text.color }">
                      {{ form.portalSubForm.tcSubTxt1 }}
                    </span>
                    <span class="preview-link" :style="portalStyle.linkStyle">
                      {{ form.portalSubForm.tcSubTxt2 }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="sms-zone sms-ipt-zone">
              <div id="sms_codeText" class="sms-zone portal-ipt-form">
                <div class="voucher-login-title js-title--sms">
                  <i class="portal-icon icon-voucher"></i>
                  <span
                    class="portal-demo-txt demo-txt--sms-title portal-title"
                  >
                    {{ form.portalSubForm.phoneInputTitle }}
                  </span>
                </div>
                <div class="row voucher-ipt-wrapper voucher-ipt">
                  <div class="col-sm-4" style="display: inline-block">
                    <div class="portal-demo-txt" id="" style="margin-right: 0">
                      +86
                    </div>
                  </div>
                  <div class="col-sm-8" style="display: inline-block">
                    <div
                      class="portal-demo-txt demo-txt--sms-phone"
                      id=""
                      style="margin-left: 8px"
                    >
                      {{ form.portalSubForm.phonePlacehold }}
                    </div>
                  </div>
                </div>
                <div class="row voucher-ipt-wrapper">
                  <div style="display: inline-block">
                    <div
                      class="voucher-ipt portal-demo-txt demo-txt--sms-code"
                      style="margin-right: 12px; width: 152px; margin-left: 0"
                    >
                      {{ form.portalSubForm.phoneCodePlaceholder }}
                    </div>
                  </div>
                  <div style="display: inline-block">
                    <div
                      class="portal-login-btn"
                      style="width: 108px; margin: 0"
                      :style="portalStyle.btnStyle"
                    >
                      <span
                        id="e_sms_span"
                        class="portal-demo-txt demo-txt--sms-get-code"
                      >
                        {{ form.portalSubForm.phoneCodeGetTip }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div id="portal_sms_login">
                <div class="portal-login-btn" :style="portalStyle.btnStyle">
                  <span
                    id="e_sms_span"
                    class="portal-demo-txt demo-txt--sms-login"
                  >
                    {{ form.portalSubForm.phoneLoginBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="row preview-tc" v-show="form.portalSubForm.tc">
                <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                <div class="col-xs-11 preview-tc__txt">
                  <span :style="{ color: form.style.text.color }">
                    {{ form.portalSubForm.tcSubTxt1 }}
                  </span>
                  <span class="preview-link" :style="portalStyle.linkStyle">
                    {{ form.portalSubForm.tcSubTxt2 }}
                  </span>
                </div>
              </div>

              <div class="has-other-auth has-other-auth--sms">
                <div class="has-other-auth__line"></div>
                <div class="has-other-auth__txt portal-demo-txt demo-txt--or">
                  {{ form.portalSubForm.or }}
                </div>
                <div class="has-other-auth__line"></div>
              </div>
            </div>

            <!-- 以下为按钮区域 -->
            <div class="buttonPosition voucher-zone voucher-btn-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-voucher"></i>
                <span class="portal-demo-txt demo-txt--voucher">
                  {{ form.portalSubForm.voucherBtnTxt }}
                </span>
              </div>
            </div>
            <div class="buttonPosition account-zone account-btn-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-account"></i>
                <span class="portal-demo-txt demo-txt--account">
                  {{ form.portalSubForm.accountBtnTxt }}
                </span>
              </div>
            </div>
            <div class="buttonPosition register-zone register-btn-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-account"></i>
                <span class="demo-txt--register">
                  {{ form.portalSubForm.registerBtnTxt }}
                </span>
              </div>
            </div>
            <div class="buttonPosition one-click-zone one-click-btn-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-one-click"></i>
                <span id="e_login_span" class="demo-txt--oneclick">
                  {{ form.portalSubForm.oneclickBtnTxt }}
                </span>
              </div>
            </div>
            <div class="buttonPosition facebook-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-facebook"></i>
                <span class="demo-txt--facebook">
                  {{ form.portalSubForm.facebookBtnTxt }}
                </span>
              </div>
            </div>
            <div class="buttonPosition sms-zone sms-btn-zone">
              <div class="portal-login-btn">
                <i class="portal-icon icon-account"></i>
                <span class="demo-txt--sms">
                  {{ form.portalSubForm.phoneBtnTxt }}
                </span>
              </div>
            </div>

            <div class="teco-blank"></div>
            <!-- copyright区域 -->
            <div class="preview-copyright">
              <p
                class="preview-copyright__txt"
                :style="{ color: form.style.text.color }"
                v-text="form.portalSubForm.copyRight"
              ></p>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="is-desktop">
        <div class="markBg">
          <div
            id="test"
            class="phone-preview"
            :style="portalStyle.bgStyle"
            ref="phonePreviewRef"
            :class="[isBgHorizontal ? 'horizon-bg' : '']"
          >
            <!-- tommy 24.6.7 pc-bg特有的背景 -->
            <div class="pc-bg" :style="portalStyle.bgStyle"></div>
            <div class="pc-bg bg-mask"></div>
            <div class="decoration">
              <div class="preview-logo-wrapper">
                <img
                  v-if="form.hasLogo"
                  class="preview-logo"
                  :style="portalStyle.logoStyle"
                  :src="form.logo"
                />
              </div>
              <div class="welcome-item">
                <div class="preview-welcome-wrapper">
                  <p
                    v-if="form.portalSubForm.welcomeType === 'text'"
                    class="preview-welcome-txt"
                    :style="portalStyle.welcomeStyle"
                  >
                    {{ form.portalSubForm.welcome }}
                  </p>
                  <img
                    v-else
                    class="preview-welcome-img"
                    :style="{ top: form.position + 'px' }"
                    :src="welcomeImage"
                  />
                </div>

                <div class="preview-market-wrapper">
                  <p
                    class="preview-market-txt"
                    v-text="form.portalSubForm.marketMessage"
                    :style="{ color: form.style.text.color }"
                  ></p>
                </div>

                <div class="preview-copyright">
                  <p
                    class="preview-copyright__txt"
                    :style="{ color: form.style.text.color }"
                    v-text="form.portalSubForm.copyRight"
                  ></p>
                </div>
              </div>
            </div>
            <div class="preview-wrapper" :style="portalStyle.wrapperStyle">
              <div class="register-zone register-ipt-zone">
                <div id="register_login_form">
                  <div id="" class="portal-ipt-form">
                    <div class="voucher-login-title js-title--register">
                      <i class="portal-icon icon-account"></i>
                      <span
                        class="portal-demo-txt demo-txt--register-title portal-title"
                      >
                        {{ form.portalSubForm.registerInputTitle }}
                      </span>
                    </div>
                    <div
                      class="register-ipt portal-demo-txt demo-txt--register-email"
                    >
                      {{ form.portalSubForm.registerEmailPlacehold }}
                    </div>
                    <div
                      class="register-ipt portal-demo-txt demo-txt--register-phone"
                    >
                      {{ form.portalSubForm.registerPhonePlacehold }}
                    </div>
                    <div
                      class="register-ipt portal-demo-txt demo-txt--register-username"
                    >
                      {{ form.portalSubForm.registerUserPlacehold }}
                    </div>
                  </div>
                </div>
                <div class="buttonPosition" id="e_register">
                  <div id="">
                    <div class="portal-login-btn" :style="portalStyle.btnStyle">
                      <span
                        id=""
                        class="portal-demo-txt demo-txt--register-login"
                      >
                        {{ form.portalSubForm.registerLoginBtnTxt }}
                      </span>
                    </div>
                  </div>
                  <div class="has-other-auth">
                    <div class="has-other-auth__line"></div>
                    <div
                      class="has-other-auth__txt portal-demo-txt demo-txt--or"
                    >
                      {{ form.portalSubForm.or }}
                    </div>
                    <div class="has-other-auth__line"></div>
                  </div>
                </div>
                <div class="row preview-tc" v-show="form.portalSubForm.tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone">
                    <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                  </div>
                  <div class="col-xs-11 preview-tc__txt">
                    <p class="e_teco1 js-teco-1">
                      {{ form.portalSubForm.tcSubTxt1 }}
                    </p>
                    <span class="e_teco2 js-teco-2">
                      {{ form.portalSubForm.tcSubTxt2 }}
                    </span>
                  </div>
                </div>
                <div class="row preview-tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone">
                    <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                  </div>
                  <div class="col-xs-11 preview-tc__txt">
                    <span class="e_teco2 js-teco-2 register-teco">
                      {{ form.portalSubForm.regDisclaimerTitle }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="one-click-zone one-click-ipt-zone">
                <div class="preview-btn" :style="portalStyle.btnStyle">
                  {{ form.portalSubForm.oneclickBtnTxt }}
                </div>
                <div class="preview-tc" v-show="form.portalSubForm.tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                  <div class="col-xs-11 preview-tc__txt">
                    <span :style="{ color: form.style.text.color }">
                      {{ form.portalSubForm.tcSubTxt1 }}
                    </span>
                    <span class="preview-link" :style="portalStyle.linkStyle">
                      {{ form.portalSubForm.tcSubTxt2 }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="voucher-zone voucher-ipt-zone">
                <div id="voucher_codeText" class="voucher-zone portal-ipt-form">
                  <div class="voucher-login-title js-title--voucher">
                    <i class="portal-icon icon-voucher"></i>
                    <span
                      class="portal-demo-txt demo-txt--voucher-title portal-title"
                    >
                      {{ form.portalSubForm.voucherInputTitle }}
                    </span>
                  </div>
                  <div
                    class="voucher-ipt portal-demo-txt demo-txt--voucher-code"
                    id=""
                  >
                    {{ form.portalSubForm.accesscodePlacehold }}
                  </div>
                </div>

                <div class="portal-voucher-login">
                  <div class="portal-login-btn" :style="portalStyle.btnStyle">
                    <span
                      id="e_voucher_span"
                      class="portal-demo-txt demo-txt--voucher-login"
                    >
                      {{ form.portalSubForm.voucherLoginBtnTxt }}
                    </span>
                  </div>
                </div>
                <div class="row preview-tc" v-show="form.portalSubForm.tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                  <div class="col-xs-11 preview-tc__txt">
                    <span :style="{ color: form.style.text.color }">
                      {{ form.portalSubForm.tcSubTxt1 }}
                    </span>
                    <span class="preview-link" :style="portalStyle.linkStyle">
                      {{ form.portalSubForm.tcSubTxt2 }}
                    </span>
                  </div>
                </div>
                <div class="has-other-auth has-other-auth--voucher">
                  <div class="has-other-auth__line"></div>
                  <div class="has-other-auth__txt portal-demo-txt demo-txt--or">
                    {{ form.portalSubForm.or }}
                  </div>
                  <div class="has-other-auth__line"></div>
                </div>
              </div>

              <div class="account-zone account-ipt-zone">
                <div id="account_login_form">
                  <div id="" class="portal-ipt-form">
                    <div class="voucher-login-title js-title--account">
                      <i class="portal-icon icon-account"></i>
                      <span
                        class="portal-demo-txt demo-txt--account-title portal-title"
                      >
                        {{ form.portalSubForm.accountInputTitle }}
                      </span>
                    </div>
                    <div
                      class="account-ipt portal-demo-txt demo-txt--account-username"
                      id=""
                    >
                      {{ form.portalSubForm.accountPlacehold }}
                    </div>
                    <div class="account-ipt" id="">
                      <span class="portal-demo-txt demo-txt--account-password">
                        {{ form.portalSubForm.passwordPlacehold }}
                      </span>
                      <i class="portal-icon icon-eye"></i>
                    </div>
                  </div>

                  <div class="buttonPosition" id="e_voucher">
                    <div id="">
                      <div
                        class="portal-login-btn"
                        :style="portalStyle.btnStyle"
                      >
                        <span
                          id=""
                          class="portal-demo-txt demo-txt--account-login"
                        >
                          {{ form.portalSubForm.accountLoginBtnTxt }}
                        </span>
                      </div>
                    </div>
                    <div class="has-other-auth">
                      <div class="has-other-auth__line"></div>
                      <div
                        class="has-other-auth__txt portal-demo-txt demo-txt--or"
                      >
                        {{ form.portalSubForm.or }}
                      </div>
                      <div class="has-other-auth__line"></div>
                    </div>
                  </div>
                  <div class="row preview-tc" v-show="form.portalSubForm.tc">
                    <div class="col-xs-1 noPadding checkTeco tecoZone">
                      <!-- <img src="../webres/images/mcp/gouxuan.png" /> -->
                    </div>
                    <div class="col-xs-11 preview-tc__txt">
                      <span :style="{ color: form.style.text.color }">
                        {{ form.portalSubForm.tcSubTxt1 }}
                      </span>
                      <span class="preview-link" :style="portalStyle.linkStyle">
                        {{ form.portalSubForm.tcSubTxt2 }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="sms-zone sms-ipt-zone">
                <div id="sms_codeText" class="sms-zone portal-ipt-form">
                  <div class="voucher-login-title js-title--sms">
                    <i class="portal-icon icon-voucher"></i>
                    <span
                      class="portal-demo-txt demo-txt--sms-title portal-title"
                    >
                      {{ form.portalSubForm.phoneInputTitle }}
                    </span>
                  </div>
                  <div class="row voucher-ipt-wrapper voucher-ipt">
                    <div class="col-sm-4" style="display: inline-block">
                      <div
                        class="portal-demo-txt"
                        id=""
                        style="margin-right: 0"
                      >
                        +86
                      </div>
                    </div>
                    <div class="col-sm-8" style="display: inline-block">
                      <div
                        class="portal-demo-txt demo-txt--sms-phone"
                        id=""
                        style="margin-left: 8px"
                      >
                        {{ form.portalSubForm.phonePlacehold }}
                      </div>
                    </div>
                  </div>
                  <div class="row voucher-ipt-wrapper">
                    <div style="display: inline-block">
                      <div
                        class="voucher-ipt portal-demo-txt demo-txt--sms-code"
                        style="margin-right: 12px; width: 152px; margin-left: 0"
                      >
                        {{ form.portalSubForm.phoneCodePlaceholder }}
                      </div>
                    </div>
                    <div style="display: inline-block">
                      <div
                        class="portal-login-btn"
                        style="width: 108px; margin: 0"
                        :style="portalStyle.btnStyle"
                      >
                        <span
                          id="e_sms_span"
                          class="portal-demo-txt demo-txt--sms-get-code"
                        >
                          {{ form.portalSubForm.phoneCodeGetTip }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                <div id="portal_sms_login">
                  <div class="portal-login-btn" :style="portalStyle.btnStyle">
                    <span
                      id="e_sms_span"
                      class="portal-demo-txt demo-txt--sms-login"
                    >
                      {{ form.portalSubForm.phoneLoginBtnTxt }}
                    </span>
                  </div>
                </div>
                <div class="row preview-tc" v-show="form.portalSubForm.tc">
                  <div class="col-xs-1 noPadding checkTeco tecoZone"></div>
                  <div class="col-xs-11 preview-tc__txt">
                    <span :style="{ color: form.style.text.color }">
                      {{ form.portalSubForm.tcSubTxt1 }}
                    </span>
                    <span class="preview-link" :style="portalStyle.linkStyle">
                      {{ form.portalSubForm.tcSubTxt2 }}
                    </span>
                  </div>
                </div>

                <div class="has-other-auth has-other-auth--sms">
                  <div class="has-other-auth__line"></div>
                  <div class="has-other-auth__txt portal-demo-txt demo-txt--or">
                    {{ form.portalSubForm.or }}
                  </div>
                  <div class="has-other-auth__line"></div>
                </div>
              </div>

              <!-- 以下为按钮区域 -->
              <div class="buttonPosition one-click-zone one-click-btn-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-one-click"></i>
                  <span id="e_login_span" class="demo-txt--oneclick">
                    {{ form.portalSubForm.oneclickBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="buttonPosition voucher-zone voucher-btn-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-voucher"></i>
                  <span class="portal-demo-txt demo-txt--voucher">
                    {{ form.portalSubForm.voucherBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="buttonPosition account-zone account-btn-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-account"></i>
                  <span class="portal-demo-txt demo-txt--account">
                    {{ form.portalSubForm.accountBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="buttonPosition facebook-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-facebook"></i>
                  <span class="demo-txt--facebook">
                    {{ form.portalSubForm.facebookBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="buttonPosition sms-zone sms-btn-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-account"></i>
                  <span class="demo-txt--sms">
                    {{ form.portalSubForm.phoneBtnTxt }}
                  </span>
                </div>
              </div>
              <div class="buttonPosition register-zone register-btn-zone">
                <div class="portal-login-btn">
                  <i class="portal-icon icon-account"></i>
                  <span class="demo-txt--register">
                    {{ form.portalSubForm.registerBtnTxt }}
                  </span>
                </div>
              </div>

              <div class="teco-blank"></div>
              <!-- copyright区域 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'portalPreview',

  props: {
    isBgHorizontal: {
      typeof: Object,
      default: true,
    },
    currentPreviewCls: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    form: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    portalStyle: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    portalLogo: {
      typeof: String,
      default: '',
    },
    regDisclaimerTerm: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    // portalObj: {
    //   typeof: Object,
    //   default: null,
    // },
    // groupId: Number,
  },

  data() {
    return {
      previewMode: 'mobile',
    };
  },

  mounted() {},

  destroyed() {},

  watch: {},
  components: {},
  computed: {
    welcomeImage() {
      return this.form.portalSubForm.advert == this.maccUrl
        ? ''
        : this.form.portalSubForm.advert;
    },
  },
  methods: {
    choosePreviewMode(mode) {
      this.previewMode = mode;
    },

    onResetStyle() {
      this.$emit('resetStyle');
    },

    forceUpdate() {
      this.$forceUpdate();
    },

    getPhonePreviewRef() {
      return this.$refs.phonePreviewRef;
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  flex-grow: 1;
  margin-left: 16px;
  position: relative;
  .options {
    z-index: 999;
    width: 80px;
    height: 24px;
    background: #fee6e6;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #fa5151;
    cursor: pointer;
  }
  .choose {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px;
    gap: 4px;
    width: 144px;
    height: 32px;
    background: #f2f3f5;
    border-radius: 4px;
    margin-bottom: 10px;

    .mobile {
      width: 62px;
      height: 26px;
      text-align: center;
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
      color: #4e5969;
      position: relative;
      .dot {
        position: absolute;
        width: 4px;
        height: 2px;
        left: calc(50% - 4px / 2 - 1px);
        bottom: 0px;
        background: #2b6aed;
        border-radius: 1px 1px 0px 0px;
      }
    }
    .mobile:hover {
      background: #ffffff;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      font-weight: 600;
      color: #1d2129;
    }
    .desktop {
      width: 73px;
      height: 26px;
      text-align: center;
      padding-top: 5px;
      padding-bottom: 5px;
      box-sizing: border-box;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      cursor: pointer;
      color: #4e5969;
      position: relative;
      .dot {
        position: absolute;
        width: 4px;
        height: 2px;
        left: calc(50% - 4px / 2 - 1px);
        bottom: 0px;
        background: #2b6aed;
        border-radius: 1px 1px 0px 0px;
      }
    }
    .desktop:hover {
      background: #ffffff;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      font-weight: 600;
      color: #1d2129;
    }
    .clicked {
      background: #ffffff;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      font-weight: 600;
      color: #1d2129;
    }
  }
  .teco-blank {
    height: 60px;
  }
  .preview-copyright {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
    padding: 0 8px;
  }
  .preview-copyright__txt {
    // color: #fff;
    overflow-wrap: break-word;
    word-break: normal;
    margin: 0;
  }
  .login-button {
    position: absolute;
    background-color: white;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 256px;
  }
  .pc {
    position: relative;
    .top {
      position: relative;
      width: 520px;
      height: 600px;
      .preview {
        position: absolute;
        top: 0;
        width: 520px;
        height: 600px;
        overflow: hidden;
        border: #dedede 2px solid;
        border-radius: 3%;
        box-sizing: border-box;
      }
      .logo {
        position: absolute;
        overflow: hidden;
        z-index: 998;
        top: 40px;
        left: 50%;
        transform: translate(-50%);
        width: 96px;
        height: 54px;
      }
    }

    .back-logo {
      width: 520px;
      height: 600px;
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      .back-pic {
        width: 256px;
        height: 392px;
        .tailor {
          width: 256px;
          height: 360px;
        }
      }
      .logo-pic {
        width: 256px;
        height: 176px;
        .tailor2 {
          width: 256px;
          height: 144px;
        }
      }
    }
  }
  .tailor-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #000000;
  }
}

// 预览样式
.preview-btn {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #fff;
  color: #fff;
  border-radius: 25px;
  text-align: center;
  position: relative;
  line-height: 40px;
  margin: 0 24px;
}
.preview-link {
  text-decoration: underline;
  line-height: 25px !important;
}

.is-desktop {
  .pc-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-position: center center;
    background-size: cover;
    &.bg-mask {
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(89px);
      -webkit-backdrop-filter: blur(89px);
      opacity: 1 !important;
      background-blend-mode: soft-light;
    }
  }
  .phone-preview {
    width: 900px;
    display: flex;
    justify-content: flex-end;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    overflow: hidden;
    background-size: contain;
    background-position: 0;

    &.horizon-bg {
      background-size: cover;
    }
  }
  .preview-wrapper {
    width: 40%;
    padding-top: 20px;
    height: 100%;
    min-height: 560px;
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px);
  }
}

.phone-preview {
  width: 320px;
  min-height: 560px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  .back-pic {
    width: 256px;
    height: 392px;
    margin-top: 16px;
    .tailor {
      width: 256px;
      height: 392px;
    }
  }
}

.preview-wrapper {
  padding-top: 20px;
  height: 100%;
  min-height: 560px;
}

.preview-logo {
  width: 40%;
}
.preview-portal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 8px;
  .ic-delete {
    cursor: pointer;
    color: #d9d9d9;
    margin-left: 24px;
  }
}
.preview-portal {
  width: 80px;
  height: 60px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.preview-welcome-wrapper,
.preview-market-wrapper {
  margin: 0 24px;
  text-align: center;
}

.preview-welcome-wrapper {
  margin-top: 16px;
}

.preview-welcome-img {
  width: 80%;
}

.preview-market-wrapper {
  min-height: 100px;
  margin-top: 8px;
}

.preview-welcome-txt {
  width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  margin: 0;
}

.preview-market-txt {
  width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}

.preview-tc {
  margin: 16px 24px;
}

.preview-tc__txt {
  // color: #fff;
  font-size: 12px;
  display: inline;
}
// =============================
.has-voucher .voucher-zone {
  display: block;
}
.portal-demo-txt.portal-title {
  color: #ffffff;
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  line-height: 28px !important;
}
.voucher-ipt {
  height: 40px;
  line-height: 38px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #fff;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  margin: 0 24px;
  position: relative;
}

.portal-login-btn {
  height: 40px;
  line-height: 38px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #fff;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  margin: 0 24px;
  text-align: center;
  position: relative;
}

.voucher-ipt-zone,
.register-ipt-zone,
.one-click-ipt-zone,
.account-ipt-zone,
.sms-ipt-zone {
  .portal-login-btn {
    background: @mainColor;
    border-color: @mainColor;
  }
}
.has-voucher .has-other-auth--voucher {
  display: none;
}
.buttonPosition {
  margin-top: 12px;
}
.e_teco1,
.e_teco2 {
  font-size: 12px;
  display: inline;
}
.portal-voucher-login {
  margin-top: 12px;
}
.voucher-login-title {
  font-size: 20px;
  position: relative;
  margin: 0 24px 24px;
}

.one-click-zone,
.sms-zone,
.facebook-zone,
.account-zone,
.voucher-zone,
.register-zone {
  display: none;
}

.portal-name-ipt {
  width: 90%;
  display: inline-block;
}

.inner-portal-container.table-container .form-group {
  margin-bottom: 0;
}

.account-ipt {
  height: 40px;
  line-height: 38px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #fff;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  margin: 0 24px;
  position: relative;
}
.account-ipt + .account-ipt {
  margin-top: 10px;
  margin-bottom: 10px;
}

.one-click-definded-time,
.one-click-definded-param {
  display: none;
}

.one-click--customed .one-click-definded-time,
.one-click--customed .one-click-definded-param {
  display: block;
}

.one-click--value .one-click-definded-param {
  display: block;
}

.facebookLikeInfo {
  display: none;
}

.facebook-like--open .facebookLikeInfo {
  display: block;
}

.auth-type-param {
  position: relative;
  left: 0px;
  top: -2px;
  display: none;
  transition: display 0.5s;
  padding: 12px;
}

.auth-type-param.mouse-move-in {
  display: block;
}

.one-click-zone,
.sms-zone,
.facebook-zone,
.account-zone,
.voucher-zone,
.register-zone {
  display: none;
}

.has-voucher.has-register .register-ipt-zone,
.has-account.has-register .register-ipt-zone,
.has-sms.has-register .register-ipt-zone {
  display: none;
}
.has-sms .sms-zone {
  display: block;
}
.input-show {
  color: #ffffff;
  margin: 10px;
  box-shadow: 0 1px 0 0 #ffffff;
}
.button-show {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  margin: 1px;
  float: right;
  border-radius: 2px;
  font-size: 12px;
}
.input-info {
  color: #ffffff;
  font-size: 12px;
}
.input-info-svg {
  color: #ffffff;
  font-size: 18px;
  background-color: #0066ff;
  border-radius: 9px;
}
.input-info-link {
  text-decoration: underline #ffffff;
}

.info-p {
  text-align: center;
  color: #ffffff;
  font-size: 18px;
}

.button-submit {
  margin: 10px;
  background-color: #0066ff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 18px;
}

/* 是否有其他的标识符 */
.has-other-auth {
  display: none;
  align-items: center;
  opacity: 0.8;
  margin: 32px 24px 16px;
}
.has-other-auth__line {
  border-bottom: 1px solid #a2a2a2;
  flex-grow: 1;
}
.has-other-auth__txt {
  color: #a2a2a2;
  padding: 0 5px;
  font-size: 10px;
}

/* 这里通过样式控制优先级：Voucher > Account > register > Oneclick > Facebook > SMS   */

.has-sms .sms-zone {
  display: block;
}

.has-facebook .facebook-zone {
  display: block;
}

.has-one-click .one-click-zone {
  display: block;
}

.has-voucher .one-click-zone,
.has-account .one-click-zone,
.has-register .one-click-zone {
  display: none;
}

.has-register .register-zone {
  display: block;
}

.has-account .account-zone {
  display: block;
}

.has-voucher .voucher-zone {
  display: block;
}

.has-account .sms-ipt-zone {
  display: none;
}

.has-voucher .account-ipt-zone {
  display: none;
}

.has-voucher .sms-ipt-zone,
.has-facebook .sms-ipt-zone,
.has-one-click .sms-ipt-zone {
  display: none;
}

.has-account .has-other-auth {
  display: none;
}
.has-facebook .has-other-auth,
.has-one-click .has-other-auth,
.has-sms .has-other-auth,
.has-voucher .has-other-auth {
  display: flex;
}

.has-voucher .has-other-auth--voucher {
  display: none;
}
.has-facebook .has-other-auth--voucher,
// .has-one-click,
.has-sms .has-other-auth--voucher,
.has-account .has-other-auth--voucher {
  display: flex;
}

.has-sms .has-other-auth--sms {
  display: none;
}
.has-facebook has-other-auth--sms,
.has-one-click has-other-auth--sms,
.has-register has-other-auth--sms,
.has-account has-other-auth--sms {
  display: flex;
}

.has-teco .tecoZone {
  display: block;
}

.tecoZone {
  display: none;
}

.has-register .register-btn-zone,
.has-one-click.has-register .register-btn-zone,
.has-sms.has-register .register-btn-zone {
  display: none;
}

.has-voucher.has-register .register-btn-zone,
.has-account.has-register .register-btn-zone,
.has-sms.has-register .register-btn-zone {
  display: block;
}

.has-one-click .one-click-btn-zone {
  display: none;
}

.has-one-click.has-account .one-click-btn-zone {
  display: block;
}
.has-one-click.has-voucher .one-click-btn-zone {
  display: block;
}
.has-one-click.has-register .one-click-btn-zone {
  display: block;
}

.has-account .account-btn-zone {
  display: none;
}

.has-voucher .voucher-btn-zone {
  display: none;
}

.has-voucher.has-account .account-btn-zone {
  display: block;
}

/* 有短信认证模式时，示例界面上“选择短信认证按钮”隐藏*/
.has-sms .sms-btn-zone {
  display: none;
}

/* 有短信认证模式时，有其他认证方式时，示例界面上“选择短信认证按钮”显示*/

.has-sms.has-voucher .sms-btn-zone {
  display: block;
}
.has-sms.has-account .sms-btn-zone {
  display: block;
}
.has-sms.has-one-click .sms-btn-zone {
  display: block;
}
.has-sms.has-facebook .sms-btn-zone {
  display: block;
}

.account-ipt,
.register-ipt {
  height: 40px;
  line-height: 38px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #fff;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  margin: 0 24px;
  position: relative;
}

.register-ipt + .register-ipt {
  margin-top: 12px;
}

.portal-ipt-form {
  padding-bottom: 1px;
}

.voucher-ipt-wrapper {
  margin: 0 24px 12px;
}

.preview-logo-wrapper {
  text-align: center;
}
.decoration {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.decoration {
  .preview-logo {
    width: 140px;
    margin-left: 30px;
  }
  .preview-logo-wrapper {
    align-self: flex-start;
  }
}
.is-desktop {
  width: 520px;
  .preview-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .preview-market-wrapper {
    width: 430px;
    text-align: left;
    min-height: 90px;
    margin-top: 10px;
  }
  .preview-market-txt {
    font-size: 16px;
    opacity: 0.5;
  }
  .portal-login-btn {
    border-radius: 8px;
  }
  .voucher-ipt {
    border-radius: 32px;
  }
  .preview-btn {
    border-radius: 8px;
  }
  .welcome-item {
    position: relative;
  }
  .preview-copyright__txt {
    text-align: center;
    margin-left: 17px !important;
    margin-bottom: 10px !important;
  }
  .markBg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.58);
  }
}

// tommy 24.6.6 需要注册信息允许采集的复选框非强制，所以这个不勾选时，条款不显示
.no-register-private {
  .register-teco {
    display: none;
  }
}
</style>
